import {
	Button,
	Form,
	Input,
	Space,
	Tag,
	Typography,
	InputNumber,
	Select,
	Radio,
	Checkbox,
} from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import type { TaskField } from "@/api/services/taskService";
import { FieldType } from "@/api/services/taskService";
import { UploadBox } from "@/components/upload/upload-box";
import RichTextEditor from "@/components/editor";

interface TaskFormProps {
	form: any;
	taskFields: TaskField[];
}

const TaskForm = ({ form, taskFields }: TaskFormProps) => {
	console.log("taskFields", taskFields);
	const renderFormFields = (fields: TaskField[], fieldListName: number) => {
		return fields.map((field) => {
			const baseProps = {
				key: field.fieldId,
				name: [fieldListName, "fields", field.fieldId.toString()],
				label: field.fieldLabel,
				rules: [
					{
						required: field.required,
						message: `请输入${field.fieldLabel}`,
					},
				],
			};

			switch (field.fieldType) {
				case FieldType.TEXT:
					return (
						<Form.Item {...baseProps}>
							<Input
								placeholder={field.placeholder || `请输入${field.fieldLabel}`}
							/>
						</Form.Item>
					);

				case FieldType.NUMBER:
					return (
						<Form.Item {...baseProps}>
							<InputNumber
								style={{ width: "100%" }}
								placeholder={field.placeholder || `请输入${field.fieldLabel}`}
							/>
						</Form.Item>
					);

				case FieldType.SELECT:
					return (
						<Form.Item {...baseProps}>
							<Select
								placeholder={field.placeholder || `请选择${field.fieldLabel}`}
								options={field.options?.map((opt) => ({
									label: opt,
									value: opt,
								}))}
							/>
						</Form.Item>
					);

				case FieldType.IMAGE:
					return (
						<Form.Item {...baseProps}>
							<UploadBox />
						</Form.Item>
					);

				case FieldType.FILE:
					return (
						<Form.Item {...baseProps}>
							<UploadBox
								placeholder={
									<div className="text-center">
										<Typography.Text type="secondary">
											点击或拖拽文件上传
										</Typography.Text>
									</div>
								}
							/>
						</Form.Item>
					);

				case FieldType.TEXTAREA:
					return (
						<Form.Item {...baseProps}>
							<Input.TextArea
								placeholder={field.placeholder || `请输入${field.fieldLabel}`}
								rows={4}
							/>
						</Form.Item>
					);

				case FieldType.RADIO:
					return (
						<Form.Item {...baseProps}>
							<Radio.Group
								options={field.options?.map((opt) => ({
									label: opt,
									value: opt,
								}))}
							/>
						</Form.Item>
					);

				case FieldType.CHECKBOX:
					return (
						<Form.Item {...baseProps}>
							<Checkbox.Group
								options={field.options?.map((opt) => ({
									label: opt,
									value: opt,
								}))}
							/>
						</Form.Item>
					);

				case FieldType.RICHTEXT:
					return (
						<Form.Item {...baseProps}>
							<RichTextEditor
								value={form.getFieldValue([
									fieldListName,
									"fields",
									field.fieldId.toString(),
								])}
								onChange={(html) => {
									form.setFieldValue(
										[fieldListName, "fields", field.fieldId.toString()],
										html,
									);
								}}
							/>
						</Form.Item>
					);

				default:
					return null;
			}
		});
	};

	return (
		<Form
			form={form}
			layout="vertical"
			className="mt-4"
			requiredMark="optional"
		>
			<Form.List name="formList" initialValue={[{}]}>
				{(fields, { add, remove }) => (
					<>
						{fields.map(({ key, name, ...restField }) => (
							<div
								key={key}
								className="relative mb-8 pb-6 last:mb-0 last:pb-0 border-b last:border-0 border-dashed transition-all duration-300"
							>
								<div className="flex items-center justify-between mb-4">
									<Space>
										<Typography.Text strong>
											第 {name + 1} 组数据
										</Typography.Text>
										{fields.length > 1 && (
											<Tag color="blue">共 {fields.length} 组</Tag>
										)}
									</Space>
									{fields.length > 1 && (
										<Button
											type="text"
											danger
											size="small"
											icon={<MinusCircleOutlined />}
											onClick={() => remove(name)}
										>
											删除此组
										</Button>
									)}
								</div>
								<div className="bg-gray-50 p-4 rounded">
									{renderFormFields(taskFields, name)}
								</div>
							</div>
						))}
						<Form.Item>
							<Button
								type="dashed"
								onClick={() => add()}
								block
								icon={<PlusOutlined />}
								className="mt-4"
							>
								添加一组数据
							</Button>
						</Form.Item>
					</>
				)}
			</Form.List>
		</Form>
	);
};

export default TaskForm;
